<template>
	<view class="container" :class="'theme-'+theme">
		<view class="nav-section">
			<view class="bg themeBgColor"></view>
			<!-- <image src="../../static/bg.png" class="bg" /> -->
			<view class="nav-title">
				<image @click="back()" src="../../static/back.png"></image>
				<text class="title">{{info.name}}</text>
			</view>
			<view class="navbar-search">
				<view class="navbar-search_icon" @click="toSearch">
					<uni-icons type="search" size="16" color="#999"></uni-icons>
				</view>
				<view class="navbar-serach" style="width: 100%;">
					<input @confirm="toSearch" class="navbar-search_text" confirm-type="search" type="text"
						v-model="searchKey" placeholder="请输入您要搜索的内容" />
				</view>
			</view>
			<view class="act-img">
				<image :src="info.h5ImgPath" mode="aspectFill" />
			</view>
		</view>
	<!-- 	<view class="act-time" v-if="flag">
			<image src="http://xbfl.e3.gcycloud.cn/fdsimage/group1/M00/07/6E/wKiAG2ErXW6AHhWSAABF4_t1iVs974.png" />
			<view class="t-time">
				<text>{{info.startAt+' '}}至{{' '+info.endAt}}</text>
			</view>
		</view> -->
		<view class="p-area">
			<image src="../../static/actbg.png" class="bg" />
			<view class="a-title">
				<image src="../../static/act.png"></image>
				<text class="tit">{{info.name}}</text>
				<text class="desc">{{info.description}}</text>
			</view>
		</view>
		<view class="navbar">
			<view class="nav-item auto" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				综合
			</view>
			<view class="nav-item flex1" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				<text>销量</text>
				<view class="p-box">
					<text :class="{themeTextColor: sortType === 20 && filterIndex === 1}" class="yticon icon-shang"></text>
					<text :class="{themeTextColor: sortType === 21 && filterIndex === 1}" class="yticon icon-shang xia"></text>
				</view>
			</view>
			<view class="nav-item flex1" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{themeTextColor: sortType === 10 && filterIndex === 2}" class="yticon icon-shang"></text>
					<text :class="{themeTextColor: sortType === 11 && filterIndex === 2}" class="yticon icon-shang xia"></text>
				</view>
			</view>
			<view class="nav-item flex1" @click="tabClick(3)">
				<text>分类</text>
				<HM-filterDropdown ref="filterCatagory" :filterData="filterData" :sList="sList" style="top: -48px;"
					:tList="tList" :defaultSelected="defaultSelect" @confirm="selectConfirm"></HM-filterDropdown>
			</view>
			<view class="nav-item flex1">
				<text class="yticon icon-fenlei1" @tap="orderbyChange"></text>
				<text>筛选</text>
				<fjj-condition ref="condition" @touchmove.stop color="#fa436a" :list="filterMenuList"
					@result="resultConditon">
				</fjj-condition>
			</view>
		</view>
		<template v-if="!hasLogin">
			<view class="p-list">
				<image src="../../static/smile.png"></image>
				<view class="hint">
					<text>登录后查看活动商品</text>
					<text style="color: #1890ff;margin-left: 10rpx;" @click="toLogin">去登录</text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="p-list" v-if="!canAccess">
				<image src="../../static/smile.png"></image>
				<view class="hint">
					<text>非常抱歉，您暂时没有权限访问此活动专区</text>
				</view>
			</view>
			<view v-else>
				<view class="p-list">
					<view class="p-item" v-for="(item,index) in productList" :key="index"
						@click="navToDetailPage(item)">
						<image class="image-wrapper" :src="item.goodsImage" mode="aspectFit"
							@error="item.goodsImage=errorImgUrl"></image>
						<view class="item-right">
							<view class="title more-t">{{item.goodsTip}}</view>
							<view class="supplier">{{item.supplierName}}</view>
							<view class="bottom">
								<view class="price">
									{{item.goodsPrice}}
								</view>
							</view>
							<view style="width: 100%;text-align: right;">
								<text class="btn" @click.stop="addCart(item)">加入购物车</text>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
				<image class="top-back" src="../../static/top-back.png" v-show="showToTop" @click="toTop()"></image>
				<image class="cart-icon" src="../../static/cart-icon.png" @click="toCart()"></image>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		errorImgUrl
	} from '@/common/utils/config.js';
	import {
		addToCart
	} from '../../api/cart/cart.js'
	import {
		getActivityInfo,
		getActivityProducts,
		isVisable
	} from '../../api/activity/activity.js'
	import {
		mapState
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		category,
		activityCategory
	} from '../../api/category/category'
	import HMFilterDropdown from '../../components/HM-filterDropdown/HM-filterDropdown.vue'
	export default {
		components: {
			uniLoadMore,
			HMFilterDropdown
		},
		data() {
			return {
				info: {},
				productList: [],
				loadingType: 'more', //加载更多状态
				page: 0,
				errorImgUrl: errorImgUrl,
				areaId: '',
				targetId: '',
				// 是否是活动
				flag: 0,
				// 搜索关键字
				searchKey: '',
				// 激活的排序项
				filterIndex: 0,
				// 排序方式
				sortType: 1,
				// 筛选条件是否初始化
				isFilterInit: 0,
				// 筛选条件列表
				filterMenuList: [{
						'title': '品目',
						'type': 'custom',
						'key': 'purchaserCatalogId',
						'isMutiple': true,
						'detailList': []
					},
					{
						'title': '价格',
						'type': 'rangenumber',
						'key': 'priceRange',
						'minPlaceholder': '￥最低价',
						'maxPlaceholder': '￥最高价'
					},
					{
						'title': '品牌',
						'type': 'custom',
						'key': 'brandId',
						'isMutiple': true,
						'detailList': []
					},
					{
						'title': '供应商',
						'type': 'custom',
						'key': 'supplierId',
						'isMutiple': true,
						'detailList': []
					}
				],
				// 选中的供应商id
				supplierIds: [],
				// 选中的品牌id
				brandIds: [],
				// 选中的品类id
				catalogIds: [],
				showToTop: false,
				headerPosition: "fixed",
				listScrollTop: 0,
				selectedIndex: 0,
				defaultSelect: [],
				sList: [],
				tList: [],
				//用于保存品目id在品目分类中的数组下标
				catalogOrder: {},
				//伪数据撑起高度，因为构造完filterData之后，直接refs引用调用打开，在watch监听filterData变化之前
				filterData: [{
					"name": "分类",
					"type": 'hierarchy',
					"submenu": [{
						"name": '食品生鲜',
						"value": 'food',
						"submenu": [{
							"name": '食品',
							"value": 'food1',
							"submenu": [{
								"name": "可乐",
								"value": 'peisi'
							}]
						}]
					}]
				}],
				//用于保存尚未在filterData中建立的一级二级品目父子关系,key:firsetCatalogId value:[secondSubmenu]
				tmpSecondMap: {},
				//用于保存尚未在filterData中建立的二级三级品目父子关系,key:secondCatalogId value:[thirdSubmenu]
				tmpThirdMap: {},
				catalogList: [],
				catalogListIds: [],
				params: {
					purchaserCatalogIds: [],
					priceMax: null,
					priceMin: null
				},
				purchaserCatalogIdsCopy: [],
				queryType: null,
				//从分类页跳转过来
				queryFromCatagory: false,
				// 是否有权限访问此活动专区
				canAccess: true,
			};
		},
		onLoad(option) {
			let id = option.id || '';
			if (!id) {
				this.$util.msg('页面参数有误！')
				return
			}
			this.getInfo(id)
			this.targetId = option.targetId || '';
			this.flag = parseInt(option.flag)
			// 判断是否能够访问活动专区
			if (this.targetId && this.hasLogin) {
				this.canAccessActivity(id)
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
			this.listScrollTop = e.scrollTop
			this.showToTop = this.listScrollTop > 0 ? true : false
		},
		//加载更多
		onReachBottom() {
			if (this.loadingType === 'nomore' || this.loadingType === 'loading') {
				return;
			}
			if (this.targetId !== '' && this.hasLogin) {
				this.getProducts(this.targetId);
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			toTop() {
				// this.showToTop = false;
				this.listScrollTop = 0;
				uni.pageScrollTo({
					scrollTop: this.listScrollTop
				})
			},
			toCart() {
				uni.setStorageSync('backCatagory', '')
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			// 筛选确定
			resultConditon(obj) {
				this.supplierIds = obj.result.supplierId
				this.brandIds = obj.result.brandId
				if (obj.result.purchaserCatalogId.length > 0) {
					this.params.purchaserCatalogIds = obj.result.purchaserCatalogId
				} else {
					this.params.purchaserCatalogIds = this.purchaserCatalogIdsCopy
				}
				this.params.priceMin = obj.result.priceRangeMin ? obj.result.priceRangeMin : null
				this.params.priceMax = obj.result.priceRangeMax ? obj.result.priceRangeMax : null
				// 发起搜索
				this.productList = []
				this.page = 0
				this.getProducts(this.targetId)
				this.$refs.condition.visibleDrawer = false
			},
			// 筛选点击
			orderbyChange(obj) {
				this.$refs.condition.visibleDrawer = true;
			},
			// navbar点击
			tabClick(index) {
				if (this.filterIndex === index && (index === 0)) {
					return;
				}
				if (index === 2) {
					this.filterIndex = index;
					this.sortType = this.sortType === 10 ? 11 : 10;
				} else if (index === 1) {
					this.filterIndex = index;
					this.sortType = this.sortType === 20 ? 21 : 20;
				} else if (index === 0) {
					this.filterIndex = index;
					this.sortType = 0;
				} else if (index === 3) {
					this.queryCatalogs()
					return;
				}
				this.productList = []
				this.page = 0
				this.getProducts(this.targetId)
			},
			// 搜索
			toSearch() {
				this.productList = []
				this.page = 0
				this.isFilterInit = 0
				this.getProducts(this.targetId)
			},
			getInfo(id) {
				const params = {
					id: id
				}
				getActivityInfo(params).then(res => {
					if (res.code === 0) {
						this.info = res.data
					}
				})
			},
			// 详情
			navToDetailPage(item) {
				let id = item.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			getProducts(targetId) {
				this.loadingType = 'loading'
				this.page += 1;
				const params = {
					brandIds: this.brandIds,
					supplierIds: this.supplierIds,
					catalogIds: this.catalogIds,
					includeTags: [targetId],
					isStandard: -1,
					limit: 7,
					page: this.page,
					purchaserCatalogIds: this.params.purchaserCatalogIds ? this.params.purchaserCatalogIds : [],
					purchaserId: uni.getStorageSync('bizDeptInfo').deptId,
					sortType: this.sortType,
					searchType: '1',
					goodsName: this.searchKey,
					searchWords: this.searchKey,
					specList: [],
					priceMax: this.params.priceMax ? this.params.priceMax : null,
					priceMin: this.params.priceMin ? this.params.priceMin : null
				}
				getActivityProducts(params).then(res => {
					if (res.code === 0) {
						this.productList = this.productList.concat(res.data.goodsList)
						this.areaId = res.data.areaId
						let total = res.data.total
						this.loadingType = this.productList.length < total ? 'more' : 'nomore';
						// 是否需要重新初始化筛选条件
						if (!this.isFilterInit) {
							this.filterMenuList.forEach(filter => {
								filter['detailList'] = []
							})
							const purchaserCatalogList = res.data.purchaserCatalogList
							if (purchaserCatalogList && purchaserCatalogList.length !== 0) {
								purchaserCatalogList.forEach(c => {
									this.filterMenuList[0]['detailList'].push({
										title: c.purchaserCatalogName,
										value: c.purchaserCatalogId
									})
								})
							}
							const brandList = res.data.brandList
							if (brandList && brandList.length !== 0) {
								brandList.forEach(b => {
									this.filterMenuList[2]['detailList'].push({
										title: b.brandName,
										value: b.brandId
									})
								})
							}
							const supplierList = res.data.supplierList
							if (supplierList && supplierList.length !== 0) {
								supplierList.forEach(s => {
									this.filterMenuList[3]['detailList'].push({
										title: s.supplierName,
										value: s.supplierId
									})
								})
							}
							this.isFilterInit = 1
						}
					}
				})
			},
			back() {
				if (getCurrentPages().length === 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			addCart(item) {
				let pType;
				let qType;
				if (item.goodsSourceType === 0) {
					pType = '02';
					qType = 1;
				} else {
					pType = '01';
					qType = 2;
				}
				const good = {
					protocolGoodsId: item.goodsId,
					protocolId: item.protocolId,
					protocolType: pType,
					remainAmount: 1
				}
				/* const params = {
					areaId: this.areaId || uni.getStorageSync('areaId'),
					bizDeptId: uni.getStorageSync('bizDeptInfo').deptId,
					goods: [good],
					isqueryAmount: true,
					queryType: qType
				} */
				const params = {
					areaId: this.areaId || uni.getStorageSync('areaId'),
					goodsId: item.goodsId,
					num: 1
				}
				addToCart(params).then(res => {
					if (res.code === 0) {
						this.$util.msg('加入购物车成功')
					}  else if(res.code === 1001) {
						let msg = ''
						if(res.extra.productAvailability) {
							msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item => item.message).toString()
						}
						this.$util.msg(res.message+' '+msg)
					}else {
						this.$util.msg(res.message)
					}
				})
			},
			selectConfirm(e) {
				let value = e.value;
				this.defaultSelect[0] = e.index;
				this.params.purchaserId = uni.getStorageSync('bizDeptInfo').deptId
				//一级品目为null == 查询全部商品
				if (value[0][0] == null) {
					this.queryType = 3;
					this.params.purchaserCatalogIds = this.catalogListIds;
				} else if (value[0][1] == null) {
					//查询一级品目下得所有商品
					let purchareIds = []
					purchareIds.push(value[0][0]);
					// //构造二级品目id
					// if (this.tmpSecondMap[value[0][0]]) {
					//     let secondCatalogIds = this.tmpSecondMap[value[0][0]].map(s => s.value);
					//     purchareIds.concat(secondCatalogIds);
					//     //构造三级品目id
					//     secondCatalogIds.forEach(s => {
					//         if (this.tmpThirdMap[s]) {
					//             purchareIds.concat(this.tmpThirdMap[s].map( t => t.value));
					//         }
					//     })
					// }
					this.params.purchaserCatalogIds = purchareIds
				} else if (value[0][2] == null) {
					//查询二级品目下所有商品
					let purchareIds = []
					purchareIds.push(value[0][1]);
					// if (this.tmpThirdMap[value[0][1]]) {
					//     purchareIds.concat(this.tmpThirdMap[value[0][1]].map(t => t.value))
					// }
					this.params.purchaserCatalogIds = purchareIds
				} else {
					//查询三级品目
					let purchareIds = []
					purchareIds.push(value[0][2]);
					this.params.purchaserCatalogIds = purchareIds
				}
				this.purchaserCatalogIdsCopy = this.params.purchaserCatalogIds
				this.productList = []
				this.page = 0
				this.isFilterInit = 0
				this.getProducts(this.targetId)
				// console.log('return_result', e)
			},
			async queryCatalogs() {
				uni.showLoading({
					title: '加载中'
				});
				if (!this.catalogList || this.catalogList.length < 1) {
					let tmpCatalogList = await activityCategory(this.targetId).then(res => res.data);
					this.catalogList = [...new Set(tmpCatalogList.map(t => JSON.stringify(t)))].map(t => JSON.parse(t))
				}
				if (this.catalogListIds.length == 0) {
					this.catalogListIds = this.catalogList.map(c => c.id)
				}
				if (JSON.stringify(this.catalogOrder) == '{}') {
					this.filterData[0]['submenu'] = [];
					this.catalogList.forEach(item => {
						if (item.parentId === '0' || item.treeDepth === 0) {
							//pid为父级id, 没有pid或者pid=0是一级分类
							this.filterData[0]['submenu'].push({
								"name": item.name,
								"value": item.id,
								"submenu": []
							});
							this.$set(this.catalogOrder, item.id, this.filterData[0]['submenu'].length - 1);
						} else if (item.treeDepth === 1) {
							//二级品目
							if (!this.tmpSecondMap[item.parentId]) {
								this.tmpSecondMap[item.parentId] = [];
							}
							this.tmpSecondMap[item.parentId].push({
								"name": item.name,
								"value": item.id,
								"submenu": []
							});
							this.$set(this.catalogOrder, item.id, this.tmpSecondMap[item.parentId].length - 1);
						} else {
							//三级品目
							if (!this.tmpThirdMap[item.parentId]) {
								this.tmpThirdMap[item.parentId] = [];
							}
							this.tmpThirdMap[item.parentId].push({
								"name": item.name,
								"value": item.id
							});
							this.$set(this.catalogOrder, item.id, this.tmpThirdMap[item.parentId].length - 1);
						}
					})
					//从tmpSecondMap和tmpThirdMap构建到filterData的三级父子关系
					Object.keys(this.tmpSecondMap).forEach(f => {
						//从tmpSecondMap和tmpThirdMap构建二三级父子关系
						this.tmpSecondMap[f].forEach(s => {
							s.submenu = this.tmpThirdMap[s.value]
						})
						//从tmpSecondMap到filterData构建一二级品目父子关系
						this.filterData[0]['submenu'][this.catalogOrder[f]].submenu = this.tmpSecondMap[f];
					})
					//匹配三级品目跳转过来得品目信息下标位置
					if (this.queryFromCatagory) {
						let newDefaultSelect = [];
						let defaultCatalog = [];
						defaultCatalog.push(this.catalogOrder[this.fid]);
						defaultCatalog.push(this.catalogOrder[this.sid]);
						defaultCatalog.push(this.catalogOrder[this.cateId]);
						newDefaultSelect.push(defaultCatalog);
						this.defaultSelect = newDefaultSelect;
					}
					// console.log('this.defaultSelect',this.defaultSelect)
				}
				uni.hideLoading();
				this.$refs.filterCatagory.defaultSelected = this.defaultSelect;
				this.$refs.filterCatagory.togglePage(0)
				// this.defaultSelect = [[0,0]]
			},
			// 判断是否有权限访问活动专区
			async canAccessActivity(id) {
				await isVisable({
					activityId: id
				}).then(res => {
					if (res.code === 0) {
						this.canAccess = !!res.data
						if (this.canAccess) {
							this.getProducts(this.targetId)
						} else {
							this.$util.msg('非常抱歉，您暂时没有权限访问此活动专区')
						}
					} else {
						this.$util.msg('获取用户可见活动专区列表失败')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background: #f5f5f5;
		height: 100%;
	}

	.nav-section {
		height: 300rpx;
		position: relative;
		text-align: center;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #FFD23D;
			border-radius: 100% 100% 100% 100% / 0% 0% 30% 30%;
		}

		.navbar-search {
			position: absolute;
			top: calc(var(--window-top) + var(--status-bar-height) + 40px);
			display: flex;
			align-items: center;
			padding: 0 10px;
			width: 90%;
			height: 30px;
			border-radius: 30px;
			background-color: #fff;
			margin-left: 5%;
			// border: 1px solid red;

			.navbar-search_icon {
				// width: 10px;
				// height: 10px;
				margin-right: 10px;
			}

			.navbar-search_text {
				width: 100%;
				font-size: 14px;
				color: #999;
			}
		}
	}

	.nav-title {
		position: absolute;
		left: 0;
		width: 100%;
		top: calc(var(--window-top) + var(--status-bar-height));
		height: 48px;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		justify-content: center;

		.title {
			color: #fff;
			font-size: 17px;
		}

		image {
			position: absolute;
			left: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.act-img {
		position: absolute;
		margin-top: calc(var(--window-top) + var(--status-bar-height) + 75px);
		margin-left: 0;
		padding: 0 20rpx;
		width: 100%;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 300rpx;
		}
	}

	.act-time {
		margin: 73rpx 20rpx 10rpx 20rpx;
		position: relative;
		text-align: center;

		image {
			width: 100%;
			height: 44px;
		}

		.t-time {
			position: absolute;
			height: 44px;
			right: 40rpx;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				margin: auto;
				color: $base-color;
				font-size: 13px;
			}
		}
	}

	.no-act-time {
		margin-top: 170rpx;
	}

	.exp-area {
		margin-left: 20rpx;
		font-size: 13px;
		text-align: left;

		.icon-bangzhu1 {
			padding: 4rpx;
			font-size: 26rpx;
			line-height: 1;
			display: inline;
		}


		.exp {
			display: inline;
			color: #909399;
		}

	}

	.p-area {
		margin: 20rpx;
		position: relative;
		padding-left: 10rpx;
		padding-right: 10rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 60px;
		}
	}


	.a-title {
		height: 60px;
		width: 100%;
		padding-right: 20rpx;
		position: absolute;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.tit {
			// flex: 1;
			color: #8a5807;
			font-size: $my-font-size-lg + 2rpx;
			margin-right: 10rpx;
			// width: 30%;
		}

		.desc {
			flex: 1;
			text-align: right;
			// right: 40rpx;
			// position: absolute;
			color: #fff;
			font-size: $my-font-size-middle;
		}
	}

	/* 筛选 */
	.navbar {
		position: relative;
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;
		margin-top: 150rpx;

		.nav-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.flex1 {
				flex: 1;
			}

			&.auto {
				min-width: 25%;
				width: fit-content;
			}

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	.p-list {
		width: 100%;
		padding: 20rpx 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			margin-top: 20rpx;
			width: 60rpx;
			height: 60rpx;
		}

		.hint {
			margin-top: 20rpx;
			display: flex;

			text {
				font-size: 14px;
			}
		}

		.p-item {
			display: flex;
			width: 100%;
			margin-bottom: 16rpx;
			justify-content: space-between;
			border-radius: 10rpx;
			background: #fff;

			.image-wrapper {
				width: 120px;
				height: 120px;
				flex-shrink: 0;
				background-color: #fff;
				border-radius: 8upx;
			}

			.item-right {
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;
				justify-content: space-between;
				position: relative;
				padding: 16rpx 20upx;

				.title {
					width: 100%;
					color: $font-color-dark;
					font-size: $font-base;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}

				/*多行文本溢出省略号*/
				.more-t {
					overflow: hidden; // 超出的文本隐藏
					text-overflow: ellipsis; // 溢出用省略号显示
					display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
					-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
					-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					transition: all linear 0.2s;
				}

				.supplier {
					font-size: $my-font-size-middle;
					color: #666ff7;
					border-radius: 8rpx;
					width: fit-content;
					padding: 6rpx 10rpx;
					background: linear-gradient(left, #eaddef, #d5daf7);
				}

				.bottom {
					display: flex;
					// justify-content: space-between;
					width: 100%;
					align-items: center;

					.integral {
						color: $uni-color-primary;
						font-size: $my-font-size-base + 4rpx;
						// margin: 4rpx 4rpx 0 4rpx;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: $my-font-size-sm;
							height: $my-font-size-sm;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						// &:after {
						// 	margin-left: 4rpx;
						// 	content: '积分';
						// 	color: #909090;
						// 	font-size: 12px;
						// }
					}

					.price {
						font-size: $font-base + 4upx;
						// font-weight: bold;
						color: $uni-color-primary;

						// height: 40upx;
						// line-height: 40upx;
						&:before {
							font-size: $my-font-size-base;
							display: inline-block;
							content: '￥';
							background-size: contain;
						}
					}

					.split {
						font-size: $my-font-size-base;
						color: $base-color;
						margin: 0 8rpx;
					}
				}

				.btn {
					width: fit-content;
					text-align: center;
					padding: 8rpx 20rpx;
					border-radius: 36rpx;
					color: $base-color;
					font-size: $my-font-size-sm;
					border: 1px solid $base-color;
				}
			}
		}
	}

	.cart-icon,
	.top-back {
		width: 85rpx;
		height: 85rpx;
		position: fixed;
		right: 30rpx;
		bottom: 170rpx;
		-webkit-overflow-scroll: touch;
	}

	.top-back {
		bottom: 270rpx;
	}
</style>
